<template>
  <div class="wrapper">
    <el-table
      :data="messageList"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @current-change="handleCurrentSelect">
      <el-table-column
        prop="details"
        label="内容">
      </el-table-column>
      <el-table-column
        label="时间"
        align="center"
        width="180">
        <template slot-scope="scope">
          {{scope.row.createTime ? scope.row.createTime.substring(5) : ''}}
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sendOne"
        label="来自"
        align="center"
        width="180">
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="size"
        background
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <!--消息详情弹窗-->
    <el-dialog
      :title="sendOne"
      :visible.sync="showDetail"
      @close="showDetail=false"
      center
      top="16%"
      width="30%">
      <span>{{messageDetail}}</span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "MessageInfo",
        data() {
            return {
                messageList: [],
                current: 1,
                size: 10,
                total: 0,
                showDetail: false,
                messageDetail: '',
                sendOne: '',
                currentUser: {}
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (row.isRead === 0) {
                    return 'warning-row';
                } else {
                    return '';
                }
            },
            handleCurrentChange(val) {
                this.loadMessageInfo(val, this.size);
            },
            loadMessageInfo(current, size) {
                const receiveId = this.currentUser.userId;
                this.getRequest('/getMessageByReceiveId', {
                    receiveId: receiveId,
                    current: current,
                    size: size
                }).then(resp => {
                    if (resp) {
                        this.messageList = resp.list;
                        this.current = current;
                        this.size = size;
                        this.total = resp.total;
                    } else {
                        this.$message.error("未知错误");
                        return false;
                    }
                })
            },
            handleCurrentSelect(val) {
                this.messageDetail=val.details;
                this.sendOne=val.sendOne;
                this.showDetail=true;
                if (val.isRead !== 1) {
                    val.isRead = 1;
                    this.getRequest('/processRead', {messageId: val.messageId}).then(resp => {
                        if (resp) {
                            console.log(resp);
                        }
                    });
                }
            }
        },
        mounted() {
            const user = sessionStorage.getItem("currentUser");
            this.currentUser = JSON.parse(user);
            this.loadMessageInfo(1, 10);
        }
    }
</script>

<style scoped>
  /deep/ .el-table .warning-row {
    background: oldlace;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    margin-right: 2%;
  }

</style>
